<template>
  <el-dialog
    title="选择试课学员"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="800px"
  >
    <div>
      <el-row :gutter="20">
        <!-- <el-col :span="6">
          <el-select v-model="filter" size="mini" placeholder="请选择学员姓名/手机号" filterable @change="chooseFilter()">
            <el-option v-for="item in chooseStudent" :key="item.code" :value="item.code" :label="item.value" />
          </el-select>
        </el-col> -->
        <el-col :span="6">
          <!-- <el-input v-if="filter === 'PhoneNumber'" v-model="selectedMsg.PhoneNumber" placeholder="请输入学员手机号" clearable type="text" size="mini" @change="getPageList()" /> -->
          <el-input v-model="selectedMsg.Name" placeholder="请输入客户姓名" clearable type="text" size="mini" @change="getPageList()" />
        </el-col>
        <el-col :span="12"><el-button type="primary" size="mini" @click="getPageList()">筛 选</el-button></el-col>
      </el-row>
      <el-table
        ref="studentsData"
        v-loading="loading"
        class="gl_table_noBorder gl_mt_15"
        :data="tableData"
        size="mini"
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column label="手机号" prop="phoneNumber" />
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="text" @click="submit(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="gl_mt_15" style="text-align: right;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="selectedMsg.MaxResultCount"
          :current-page="selectedMsg.Page"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <!-- <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" size="mini" @click="submit()">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
// import { deepCopy } from '@/lib';
import {
  Api_GET_ClubCustomerQO // 获取学员列表
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubCustomer // 获取学员列表
} from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      selectedMsg: new Api_GET_ClubCustomerQO(),
      total: 0,
      chooseStudent: [{ code: 'StudentName', value: '学员姓名' }, { code: 'PhoneNumber', value: '手机号' }],
      dialogVisible: false,
      loading: false,
      selectionId: '',
      filter: 'StudentName',
      tableData: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  mounted() {
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取人员名单
    getPageList(page) {
      this.selectedMsg.Page = page || 1;
      // this.selectedMsg.IsEnable = true;
      // this.selectedMsg.IncludeStudentContacts = true;
      this.selectedMsg.SkipCount = (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount;
      this.loading = true;
      api_GET_ClubCustomer(this.selectedMsg).then(res => {
        this.loading = false;
        this.total = res.totalCount;
        this.tableData = res.items;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 点击跳转课表
    submit(row) {
      const that = this;
      that.selectionId = row.id;
      // this.dialogVisible = false;
      if (that.selectionId) {
        const _name = 'Choseclass';
        this.$router.push({
          name: _name,
          query: {
            studentId: that.selectionId
          }
        });
      } else {
        this.$message({ type: 'warning', message: '请先选择学员' });
      }
    },
    // 表格选中  @selection-change="handleSelectionChange"  @row-click="handleRowClick"
    // handleSelectionChange(selection) {
    //   const oneSelection = deepCopy(selection);
    //   if (selection.length > 1) {
    //     const copySelection = deepCopy(selection);
    //     this.$refs.studentsData.clearSelection();
    //     this.$refs.studentsData.toggleRowSelection(selection.pop());
    //     const select = (copySelection.pop());
    //     this.selectionId = select.id;
    //   } else {
    //     if (oneSelection.length > 0) {
    //       this.selectionId = oneSelection[0].id;
    //     }
    //   }
    // },
    // 处理性别
    formatGender(genderCode) {
      let _gender;
      if (this.dict && this.dict.gender && genderCode) {
        _gender = this.dict.gender.find(item => item.code === genderCode);
      }
      _gender = _gender ? _gender.value : '';
      return _gender;
    },
    // 行选中
    // handleRowClick(row, column, event) {
    //   this.$refs.studentsData.toggleRowSelection(row);
    // },
    chooseFilter() {
      this.selectedMsg = new Api_GET_ClubCustomerQO();
      this.getPageList();
    },
    cancelDialog() {
      this.selectionId = '';
      this.selectedMsg = new Api_GET_ClubCustomerQO();
      this.filter = '';
      // this.$refs.studentsData.clearSelection();
      this.dialogVisible = false;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.selectedMsg.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
